<template>
 <!-- 定义布局容器 -->
<el-container class="home-container">
<!-- top -->
<!-- <TheHeader></TheHeader> -->
    <el-header style="height: 60px;background-color: #000000;">
      <div>
        <span style="color: #ffffff;font-weight: bold;">南欧汽配之家</span>
      </div>
      <el-row>
        <i class="el-icon-question" style="font-size: 30px;padding-right: 20px;" @click="dialogVisible = true"></i>
        <el-button type="danger" round style="text-align: center;" @click="logout">退出登录</el-button>
      </el-row>
    </el-header>

<!-- 导航栏 -->
    <div>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#303133"
          text-color="#fff"
          active-text-color="#FFE100"
          style="padding-left: 500px;background-color: #303133;"
          >
           <el-menu-item index="1" style="margin-right: 60px;font-size: 18px;" @click="tiaozhuan1"><i class="el-icon-s-home"></i>首页</el-menu-item>
           <el-menu-item index="2" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan2"><i class="el-icon-s-shop" ></i>购物中心</el-menu-item>
           <el-menu-item index="3" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan3"><i class="el-icon-s-opportunity"></i>车型查询</el-menu-item>
           <el-menu-item index="4" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan4"><i class="el-icon-s-claim"></i>关于我们</a></el-menu-item>
           <el-menu-item index="5" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan5"><i class="el-icon-user-solid"></i>个人中心</a></el-menu-item>
           </el-menu>
    </div>

<!-- 走马灯-->
      <div style="width: 100%;height: 450px;background-color: #CCCCCC;">
          <div style="width: 1600px;margin: 0 auto;">
            <el-carousel indicator-position="outside" style="height: 500px;">
                <el-carousel-item v-for="item in item" :key="item.name" style="height: 450px;">
                  <img :src="item.url" style="width: 100%;height: 100%;"/>
                </el-carousel-item>
            </el-carousel>
          </div>
      </div>

<!-- 小banner-->
		<div class="sub_banner center">
			<div class="sidebar fl">
				<div class="fl"><a href="">
        <!-- <img src="../../assets/image/hjh_01.gif"> -->
        <div style="width: 78;height: 85;background-color: rgb(127,121,115);">
          <i class="el-icon-s-home" style="color: #ffffff;font-size: 30px;padding-left: 25px;padding-top: 16px;"></i>
          <p style="color: #FFFFFF;font-size: 12px;text-align: center;">关于商品</p>
        </div>
        </a></div>
				<div class="fl"><a href=""><img src="../../assets/image/hjh_02.gif"></a></div>
				<div class="fl"><a href=""><img src="../../assets/image/hjh_03.gif"></a></div>
				<div class="fl"><a href=""><img src="../../assets/image/hjh_02.gif"></a></div>
				<div class="fl"><a href=""><img src="../../assets/image/hjh_05.gif"></a></div>
				<div class="fl"><a href=""><img src="../../assets/image/hjh_03.gif"></a></div>
				<div class="clear"></div>
			</div>
			<div class="datu fl">
        <div style="width: 321px;height: 170px;background-color: #EE9900;">
          <p style="text-align: center;padding-top: 25px;font-size: 20px;color: #ffffff;font-family: '黑体';">壳牌 (Shell)</p>
          <p style="text-align: center;padding-top: 2px;font-size: 12px;color: #ffffff;font-family: '黑体';">全合成机油 汽车保养汽机油 5W-40 SN级 4L259元京保养</p>
          <a href=""><img src="../../assets/image_index/2_1.png" alt="" style="width: 170px;height: 170px;padding-left: 70px;margin-top:-30px;"></a>
         </div>
      </div>
			<div class="datu fl">
        <!-- <a href=""><img src="../../assets/image/xiaomi5.jpg" alt=""></a> -->
        <div style="width: 321px;height: 170px;background-color: #FFE100">
          <p style="text-align: center;padding-top: 25px;font-size: 20px;color: #ffffff;font-family: '黑体';">壳牌 (Shell)</p>
          <p style="text-align: center;padding-top: 2px;font-size: 12px;color: #ffffff;font-family: '黑体';">全合成机油 汽车保养汽机油 5W-40 SN级 4L259元京保养</p>
          <a href=""><img src="../../assets/image_index/2_1.png" alt="" style="width: 170px;height: 170px;padding-left: 80px;margin-top:-30px;"></a>
         </div>
      </div>
			<div class="datu fr" style="margin-left: 14px;">
        <div style="width: 321px;height: 170px;background-color: #DBC751;">
          <p style="text-align: center;padding-top: 25px;font-size: 20px;color: #ffffff;font-family: '黑体';">壳牌 (Shell)</p>
          <p style="text-align: center;padding-top: 2px;font-size: 12px;color: #ffffff;font-family: '黑体';">全合成机油 汽车保养汽机油 5W-40 SN级 4L259元京保养</p>
          <a href=""><img src="../../assets/image_index/2_1.png" alt="" style="width: 170px;height: 170px;padding-left: 70px;margin-top:-30px;"></a>
         </div>
      </div>
			<div class="clear"></div>
    </div>

<!-- 单品 -->
<!-- start danpin -->
		<div class="danpin center">
			<div class="biaoti center">南欧单品</div>
			<div class="main center">
				<div class="mingxing fl">
					<div class="sub_mingxing"><a href=""><img src="../../assets/image_index/3_5.jpg" alt=""></a></div>
					<div class="pinpai" style="font-size: 20px;font-weight: bold;">活塞环修复还原液</a></div>
					<div class="youhui" style="margin-top: 25px;">5月9日-21日享花呗12期分期免息</div>
					<div class="jiage">168元起</div>
				</div>
				<div class="mingxing fl">
					<div class="sub_mingxing"><a href=""><img src="../../assets/image_index/3_2.jpg" alt=""></a></div>
					<div class="pinpai" style="font-size: 20px;font-weight: bold;">壳牌 (Shell) </a></div>
					<div class="youhui">5月9日-10日，下单立减200元</div>
					<div class="jiage">299元</div>
				</div>
				<div class="mingxing fl">
					<div class="sub_mingxing"><a href=""><img src="../../assets/image_index/3_3.jpg" alt=""></a></div>
					<div class="pinpai" style="font-size: 20px;font-weight: bold;">嘉实多（Castrol）</a></div>
					<div class="youhui">全合成机油 汽车保养汽机油 5W-40 SN级 4L </div>
					<div class="jiage">259元</div>
				</div>
				<div class="mingxing fl">
					<div class="sub_mingxing"><a href=""><img src="../../assets/image_index/3_4.jpg" alt=""></a></div>
					<div class="pinpai" style="font-size: 20px;font-weight: bold;">京保养</a></div>
					<div class="youhui">5月9日，下单立减200元</div>
					<div class="jiage">259元</div>
				</div>
				<div class="mingxing fl">
					<div class="sub_mingxing"><a href=""><img src="../../assets/image_index/3_5.jpg" alt=""></a></div>
					<div class="pinpai" style="font-size: 20px;font-weight: bold;">美孚（Mobil）</a></div>
					<div class="youhui">更轻更薄，像杂志一样随身携带</div>
					<div class="jiage">3599元起</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>

<!-- 配件 -->
		<div class="peijian w">
			<div class="biaoti center">南欧配件</div>
			<div class="main center">
				<div class="content">
					<div class="remen fl"><a href=""><img src="../../assets/image_index/4_1.jpg" style="width: 240px;height: 300px;"></a>
					</div>
					<div class="remen fl">
						<div class="xinpin"><span>新品</span></div>
						<div class="tu"><a href=""><img src="../../assets/image_index/3_2.jpg"style="width: 140px;height: 140px;padding-top: 20px;"></a></div>
						<div class="miaoshu"><a href="">壳牌 (Shell)</a></div>
						<div class="jiage">249元</div>
						<div class="pingjia">372人评价</div>
						<div class="piao">
							<a href="">
								<span>发货速度很快</span>
								<span>来至于xx的评价</span>
							</a>
						</div>
					</div>
					<div class="remen fl">
						<div class="xinpin"><span style="background:#fff"></span></div>
						<div class="tu"><a href=""><img src="../../assets/image_index/3_3.jpg"style="width: 140px;height: 140px;padding-top: 20px;"></a></div>
						<div class="miaoshu"><a href="">润滑油</a></div>
						<div class="jiage">29元</div>
						<div class="pingjia">372人评价</div>
					</div>
					<div class="remen fl">
						<div class="xinpin"><span style="background:red">享6折</span></div>
						<div class="tu"><a href=""><img src="../../assets/image_index/3_2.jpg"style="width: 140px;height: 140px;padding-top: 20px;"></a></div>
						<div class="miaoshu"><a href="">润滑油</a></div>
						<div class="jiage">19元</div>
						<div class="pingjia">372人评价</div>
						<div class="piao">
							<a href="">
								<span>发货速度很快</span>
								<span>来至于uu的评价</span>
							</a>
						</div>
					</div>
					<div class="remen fl">
						<div class="xinpin"><span style="background:#fff"></span></div>
						<div class="tu"><a href=""><img src="../../assets/image_index/3_2.jpg"style="width: 140px;height: 140px;padding-top: 20px;"></a></div>
						<div class="miaoshu"><a href="">润滑油</a></div>
						<div class="jiage">89元</div>
						<div class="pingjia">372人评价</div>
						<div class="piao">
							<a href="">
								<span>发货速度很快</span>
								<span>来至于uu的评价</span>
							</a>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="content">
					<div class="remen fl"><a href=""><img src="../../assets/image_index/4_2.jpg" style="width: 240px;height: 300px;"></a>
					</div>
					<div class="remen fl">
						<div class="xinpin"><span style="background:#fff"></span></div>
						<div class="tu"><a href=""><img src="../../assets/image_index/3_2.jpg"style="width: 140px;height: 140px;padding-top: 20px;"></a></div>
						<div class="miaoshu"><a href="">润滑油</a></div>
						<div class="jiage">19元</div>
						<div class="pingjia">372人评价</div>
						<div class="piao">
							<a href="">
								<span>发货速度很快</span>
								<span>来至于uu的评价</span>
							</a>
						</div>
					</div>
					<div class="remen fl">
						<div class="xinpin"><span style="background:#fff"></span></div>
						<div class="tu"><a href=""><img src="../../assets/image_index/3_2.jpg"style="width: 140px;height: 140px;padding-top: 20px;"></a></div>
						<div class="miaoshu"><a href="">润滑油</a></div>
						<div class="jiage">19.9元</div>
						<div class="pingjia">372人评价</div>
					</div>
					<div class="remen fl">
						<div class="xinpin"><span style="background:#fff"></span></div>
						<div class="tu"><a href=""><img src="../../assets/image_index/3_2.jpg"style="width: 140px;height: 140px;padding-top: 20px;"></a></div>
						<div class="miaoshu"><a href="">润滑油</a></div>
						<div class="jiage">59元</div>
						<div class="pingjia">775人评价</div>
					</div>
					<div class="remenlast fr">
						<div class="hongmi"><a href=""><img src="../../assets/image_index/3_2.jpg"style="width: 40px;height: 40px;padding-top: 20px;"></a></div>
						<div class="liulangengduo"><img src="../../assets/image/liulangengduo.png" alt="" @click="chakanxiangqin"></div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</div>

  <div style="width: 1400px;margin: 0 auto;">
       <el-row :gutter="100" style="margin:50px">
      </el-row>
 </div>

<!-- 帮助弹框 -->
 <el-dialog
   title="帮助"
   :visible.sync="dialogVisible"
   width="60%"
   :before-close="handleClose">
   <div class="title"><i class="el-icon-price-tag"></i>关于本站</div>
       <el-row>
        <el-col :span="18" :offset="3">
           <el-main>
            <el-card class="box">
                <p>
                  <el-tag type="success" effect="dark">功能</el-tag>
                  <br>
                    游客功能:用户可以在未登录时,查看首页,购物中心和关于项目的相关信息
                  <br>
                    用户功能：用户可登录系统可维护购买商品
                 <br>
                   游客功能:用户可以在未登录时,查看首页,购物中心和关于项目的相关信息
                 <br>
                   用户功能：用户可登录系统可维护购买商品
                 <br>
                   游客功能:用户可以在未登录时,查看首页,购物中心和关于项目的相关信息
                 <br>
                   用户功能：用户可登录系统可维护购买商品
                </p>
                <p>
                    <el-tag type="primary" effect="dark">优点</el-tag>
                </p>
                <p>
                    <el-tag type="warning" effect="dark">模块</el-tag>
                    本系统包含的模块：注册模块、登录模块、用户模块、管理员模块、供应商模块。
                </p>
                <!-- <el-image :src="about" fit="fit" style="width: 100%;height: 100%"></el-image> -->
            </el-card>
            </el-main>
        </el-col>
       </el-row>
   <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
   </span>
 </el-dialog>

<TheFooter></TheFooter>
  </el-container>

</template>

<script>
import TheFooter from '../the/TheFooter.vue'
import TheHeader from '../the/TheHeader.vue'
export default {
  data () {
    return {
      dialogVisible: false,
      activeIndex2: '1',
      item: [
        {
          name: '1',
          url: require('../../assets/images/1.jpg')
        },
        {
          name: '2',
          url: require('../../assets/images/2.jpg')
        },
        {
          name: '3',
          url: require('../../assets/image_index/banner_1.jpg')
        },
        {
          name: '4',
          url: require('../../assets/image_index/banner_2.jpg')
        }
      ]
    }
  },
  components: {
    TheHeader,
    TheFooter
  },
  methods: {
    logout () {
      // 1.删除session中的数据
      window.sessionStorage.clear()
      // 2.用户访问登录页面
      this.$router.push('/login')
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    chakanxiangqin () {
      this.$router.push('/yinlianbang')
    },
    tiaozhuan1 () {
      this.$router.push('/index')
    },
    tiaozhuan2 () {
      this.$router.push('/shopping')
    },
    tiaozhuan3 () {
      this.$router.push('/car')
    },
    tiaozhuan4 () {
      this.$router.push('/about')
    },
    tiaozhuan5 () {
      this.$router.push('/usernew')
    }
  },
  computed: {
    activeIndex () {
      return this.$route.path.replace('/', '')
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../../assets/css/style.css";
    /* top*/
  .el-header {
    background-color: rgb(43,42,50);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFFFFF;
    padding-left: 1px;

    >div {
      display: flex;
      align-items: center;

      span {
        margin-left: 15px;
        font-size: 25px;
      }
    }
  }
    /* 导航栏*/
    .el-menu {
      // margin-left: 300px;
    }
    /* 走马灯*/
     .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
      }

.title{
    text-align: center;
    font-size: 30px;
    margin-top: 100px;
    font-family: "宋体";

}

.el-row{
    margin-bottom: 20px;
    margin-top: 15px;
}
.box{
    padding: 30px;
    background-image: url('../../assets/img/2.png') ;
    /*height: 600px;*/
}
.el-card {
    background-color: #EEEEEE;
    background-image: url('../../assets/img/2.png') ;
  }
.box p{
    font-family: "宋体";
    font-size: 20px;
    line-height: 40px;
}

</style>
